<template>
  <div class="goodsData">
      <div class="data_back" @click="back">
          <img src="../../assets/icon/fanhui.png" alt="">
      </div>

      <div class="data_swiper">
        <van-swipe class="my-swipe" :autoplay="3000">
            <van-swipe-item v-for="(item, index) in detail.pics" :key="index">
                <img :src="item.pic" width="100%">
            </van-swipe-item>
        </van-swipe>
      </div>

      <div class="data_container">
          <p class="data_title">{{detail.basicInfo.name}}</p>
          <p class="data_desc">{{detail.basicInfo.characteristic}}</p>
          <div class="data_count">
              <p class="data_price">
                  <span class="ori_price">低价￥{{detail.basicInfo.minPrice}}</span>
                  <span class="del_price">原价￥{{detail.basicInfo.originalPrice}}</span>
              </p>
              <p class="data_sale">库存 {{detail.basicInfo.stores}}</p>
          </div>
      </div>

      <div class="data_change">
          <div :class="this.selIndex?'data_chnage_bor':''" @click="changeIndex">商品介绍</div>
          <div :class="!this.selIndex?'data_chnage_bor':''" @click="changeIndex">商品评价</div>
      </div>

      <div class="data_content" v-html="detail.content" v-if="this.selIndex"></div>

      <div class="data_requtation" v-else>
          <div class="data_requtation_container" v-for="(item, index) in requtation" :key="index">
              <div class="requtation_icon">
                  <van-icon size="55" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
              </div>
              <div class="requtation_content">
                <div class="data_requtation_user">
                    <span>{{item.user.nick}}</span>
                    <span class="goods_requtation">{{item.goods.goodReputationStr}}</span>
                </div>
                <div class="data_requtation_text">
                    {{item.goods.goodReputationRemark}}
                </div>
                <div class="data_requtation_desc">
                    <div class="desc_time">
                        <p>{{item.goods.dateReputation}}</p>
                    </div>
                    <div class="desc_sel">
                        <p>{{item.goods.property}}</p>
                    </div>
                </div>
              </div>
          </div>
      </div>

      <van-popup v-model="show" position="bottom" closeable>
          <div class="popup_container">
              <div class="popup_good">
                  <div class="good_img">
                      <img :src="detail.basicInfo.pic" width="100%" height="100%">
                  </div>
                  <div class="good_content">
                      <div class="good_content_title">{{detail.basicInfo.name}}</div>
                      <div class="good_content_price">￥{{detail.basicInfo.minPrice}}</div>
                  </div>
              </div>
              <div class="popup_child" v-for="(item, index) in detail.properties" :key="index">
                  <div class="popup_child_title">{{item.name}}</div>
                  <div class="popup_child_items">
                      <p 
                      class="popup_child_item" 
                      v-for="(size, index) in item.childsCurGoods" 
                      :key="index"
                      @click="chooseSize(size)"
                      >{{size.name}}</p>
                  </div>
              </div>
              <div class="popup_num">
                  <div class="popup_num_text">购买数量</div>
                  <div class="popup_num_change">
                      <button class="popup_num_btn" @click="changeNum('minus')">-</button>
                      <span class="popup_number">{{num}}</span>
                      <button class="popup_num_btn" @click="changeNum('plus')">+</button>
                  </div>
              </div>
              <div class="popup_submit" @click="addCart">加入购物车</div>
          </div>
      </van-popup>

      <div class="data_submit">
          <div class="data_submit_icon">
              <span class="cart_num" v-show="this.cart.length > 0">{{this.cart.length}}</span>
              <img src="../../assets/icon/kefu.png" alt="">
              <img src="../../assets/icon/gouwuche.png" @click="goCart" alt="">
              <img src="../../assets/icon/shoucang.png" v-show="this.isCollect" @click="collect">
              <img src="../../assets/icon/shoucang_active.png" v-show="!this.isCollect" @click="collect">
          </div>
          <div class="data_submit_btn">
              <div class="submit_bay">立即购买</div>
              <div class="submit_add" @click="showPopup">加入购物车</div>
          </div>
      </div>
  </div>
</template>

<script>
import PATH from '../../router/constant'
import mixin from '../../store/index'
import './goodsData.css'
export default {
  mixins: [mixin],
    data() {
        return {
            detail: {},
            requtation: [],
            selIndex: true,
            isCollect: true,
            show: false,
            num: 1,
            selName: ''
        }
    },
    mounted() {
        var id = this.$route.query.id;
        this.$API.getGoodsData({
          params: {
            id: id
          }
        }).then(res=> {
        //   console.log(res.data.data)
          this.detail = res.data.data;
        })
        this.$API.getRequtation({
          params: {
            goodsId: id
          }
        }).then(res=> {
        //   console.log(res.data.data)
          this.requtation = res.data.data;
        })
    },
    methods: {
        back() {
            window.history.back()
        },
        changeIndex() {
            this.selIndex = !this.selIndex;
        },
        collect() {
            this.isCollect = !this.isCollect
        },
        showPopup() {
            this.show = true;
        },
        goCart() {
            this.$router.push(PATH.CART)
        },
        changeNum(key) {
            switch(key) {
                case 'plus':
                    this.num++;
                    break;
                case 'minus':
                    if(this.num <= 1) {
                        this.num = 1
                    }else {
                        this.num--;
                    }
                    break;
            }
        },
        addCart() {
            if(localStorage.token) {
                if(this.selName == '') {
                    this.$notify({
                        type: 'warning',
                        message: '请选择规格'
                    })
                    this.show = false;
                }else {
                    var carts = {
                        pic: this.detail.basicInfo.pic,
                        name: this.detail.basicInfo.name,
                        price: this.detail.basicInfo.minPrice,
                        desc: this.selName,
                        num: this.num,
                        checked: false
                    }
                    this.onAddCart(carts)
                    this.$notify({
                        type: 'success',
                        message: '加入购物车成功'
                    })
                    this.show = false
                }
            }else {
                this.$notify({
                    type: 'danger',
                    message: '请先登录'
                })
                this.$router.push(PATH.LOGIN)
            }
        },
        chooseSize(size) {
            this.selName = size.name;
            // console.log(this.selName)
        }
    }
}
</script>

<style scoped>
.goodsData {
    overflow: hidden;
}
.data_back {
    position: fixed;
    top: 0.15rem;
    left: 0.2rem;
    padding: 0.08rem 0.12rem;
    background-color: #eee;
    border: 1px solid #fff;
    color: #333;
    border-radius: 1rem;
    z-index: 9;
}
.data_container {
    width: 90%;
    margin: 5%;
}
.data_title {
    font-size: 0.3rem;
    color: #333;
}
.data_desc {
    font-size: 0.2rem;
    color: #999;
}
.data_count {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.2rem;
    color: #999;
}
.ori_price {
    color: red;
    margin-right: 0.2rem;
    font-size: 0.3rem;
}
.data_change {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.data_change div {
    width: 50%;
    height: 0.6rem;
    text-align: center;
}
.data_chnage_bor {
    border-bottom: 0.04rem solid red;
}
.data_content > img {
    width: 100%;
}
.data_submit {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 1.1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    z-index: 9;
}
.data_submit_icon {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.cart_num {
    position: absolute;
    top: 0.1rem;
    left: 2rem;
    background-color: red;
    color: white;
    font-size: 0.2rem;
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 0.3rem;
    text-align: center;
}
.data_submit_icon img {
    width: 0.5rem;
    border-radius: 0.01rem solid #eee;
}
.data_submit_btn {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.data_submit_btn div {
    width: 50%;
    height: 100%;
    text-align: center;
    font-size: 0.25rem;
    line-height: 1.1rem;
}
.submit_add {
    background-color: red;
    color: #fff;
}
.data_requtation_container {
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.01rem solid #eee;
    font-size: 0.2rem;
}
.requtation_icon {
    width: 25%;
    text-align: center;
}
.requtation_content {
    width: 75%;
}
.data_requtation_user {
    margin: 0.1rem 0;
}
.goods_requtation {
    background-color: red;
    color: #fff;
    padding: 0.05rem;
    margin-left: 0.1rem;
    border-radius: 0.05rem;
}
.data_requtation_desc {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
}
.desc_time {
    width: 30%;
}
.desc_sel {
    width: 40%;
}
.popup_container {
    background-color: #fff;
    margin-bottom: 0.2rem;
    z-index: 999;
}
.popup_good {
    width: 100%;
    height: 1.8rem;
    margin: 0.2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.01rem solid #eee;
}
.good_img {
    width: 24%;
    height: 1.6rem;
}
.good_content {
    width: 70%;
    font-size: 0.3rem;
    color: #666;
}
.good_content_price {
    color: red;
}
.popup_child {
    margin-top: 0.3rem;
}
.popup_child_title {
    font-size: 0.28rem;
    margin-left: 0.15rem;
    color: #333;
}
.popup_child_items {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.popup_child_item {
    font-size: 0.28rem;
    padding: 0.2em;
    border: 0.01rem solid #999;
    color: #333;
    margin: 0.15rem;
    border-radius: 0.1rem;
}
.popup_child_item_active {
    border: 0.01rem solid red !important;
}
.popup_num {
    width: 100%;
    height: 1.8em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5em 0;
}
.popup_num_btn {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    margin: 0 0.1rem;
    background-color: #eee;
    border: none;
    outline: none;
}
.popup_num_text {
    font-size: 0.28rem;
    color: #666;
}
.popup_submit {
    width: 100%;
    height: 0.8rem;
    background-color: red;
    color: #fff;
    text-align: center;
    line-height: 0.8rem;
}
</style>